
<!--<!DOCTYPE html>-->
<!--<script src="jquery.js"></script>-->
<!--<script src="flexible.js"></script>-->

<!--<style>-->

    <!--*{-->
        <!--margin:0px;-->
        <!--padding:0px;-->
    <!--}-->
    <!--html,body{-->
        <!--width:100%;-->
        <!--height:100%;-->
    <!--}-->
    <!--.clearfix:after{-->
        <!--clear:both;-->
        <!--display:table;-->
        <!--content:""-->
    <!--}-->
    <!--.fl{-->
        <!--float:left;-->
    <!--}-->
    <!--.product{-->
        <!--width:50%;-->
        <!--padding:0.2rem;-->
        <!--box-sizing: border-box;-->
    <!--}-->
    <!--.product img{-->
        <!--width:100%;-->
        <!--opacity:0.1;-->
        <!--transition:all 1s;-->
    <!--}-->

    <!--#loading{-->
        <!--box-shadow:3px 3px 3px 10px white;-->
        <!--background:white;-->
        <!--border-radius:5px;-->
        <!--text-align:center;-->
        <!--line-height:2rem;-->
    <!--}-->
    <!--#d1{-->
        <!--position:fixed;-->
        <!--z-index:9999;-->
        <!--width:100%;-->
        <!--height:100%;-->
        <!--background:transparent;-->
        <!--display:none;-->
        <!--align-items: center;-->
        <!--justify-content: center;-->
    <!--}-->
    <!--#productList{-->
        <!--display: none;-->
    <!--}-->
<!--</style>-->

<!--<div id="d1">-->
    <!--<div id="loading"><img src="images/timg.gif" width="70%" /></div>-->
<!--</div>-->



<!--<div class="all">-->

    <!--<div onclick="toTop()"-->
         <!--style="position:fixed;right:0.3rem;bottom:4rem;background:white">回到顶部</div>-->

    <!--<div id="productList" class="clearfix"></div>-->
    <!--<div id="loading2" style="text-align:center;height:1rem;display:none"><img style="vertical-align: middle" src="images/timg.gif" height="90%" />正在加载 ...</div>-->
<!--</div>-->

<!--<script>-->
    <!--var loadedImageCount = 0;-->
    <!--var page = 0;-->
    <!--//  var isDone = true;-->

    <!--window.onload = function(){-->
        <!--window.onscroll = function(){-->
            <!--var st = document.body.scrollTop||document.documentElement.scrollTop; //0-->
            <!--var ch = document.body.clientHeight||document.documentElement.clientHeight;//1136-->
            <!--var sh = document.body.scrollHeight||document.documentElement.scrollHeight;-->

            <!--var isDaoDi = st + ch == sh;-->
            <!--if(isDaoDi&&!diXian){-->
                <!--loadNextPageData();-->
            <!--}-->
            <!--loadRealImage();-->
        <!--}-->
    <!--};-->

    <!--loadNextPageData();-->

    <!--var timer;-->
    <!--function toTop(){-->
        <!--$("html,body").animate({ scrollTop: 0 }, 500);-->
<!--//       var st = document.body.scrollTop||document.documentElement.scrollTop;-->
<!--//       var speed = st/30;-->
<!--//       console.log(speed);-->
<!--//       timer = setInterval(function(){-->
<!--//           if(st==0){-->
<!--//               clearInterval(timer);-->
<!--//           }-->
<!--//-->
<!--//           var currentTop = parseInt(st);-->
<!--//           document.body.scrollTop = currentTop - speed;-->
<!--//           document.documentElement.scrollTop = currentTop - speed;-->
<!--//       },2);-->
    <!--}-->

    <!--function loadNextPageData(){-->
        <!--// if(!isDone){-->
        <!--//    return;-->
        <!--// }-->
        <!--page++;-->

        <!--if(page>=2){-->
            <!--loading2.style.display = "block";-->
        <!--}-->
        <!--//4996-->
        <!--// var pageCount = (page-1)*44+4900;-->
        <!--var pageCount = (page-1)*44;-->
        <!--//  var pageCount = 4996;-->
        <!--// 1 ==> 0-->
        <!--// 2 ==> 44-->
        <!--// 3 ==> 88-->
        <!--// 4 ==>132-->
        <!--// d1.style.display = "flex";-->


        <!--//isDone = false;-->



        <!--$.ajax(-->
            <!--{-->
                <!--url:"https://s.taobao.com/search?data-key=s" +-->
                <!--"&data-value="+pageCount+"&ajax=true" +-->
                <!--"&_ksTS=1530243656560_891" +-->
                <!--"&q=%E7%94%B7%E9%9E%8B&refpid=" +-->
                <!--"430267_1006&source=tbsy&" +-->
                <!--"style=grid&tab=all&" +-->
                <!--"pvid=b8318040521666151a70a5f3eebd88c3" +-->
                <!--"&clk1=0bf0718470c87df17b328af7d5f0e69e" +-->
                <!--"&spm=a21bo.2017.201856-sline." +-->
                <!--"2.5af911d9RRzslq&bcoffset=0" +-->
                <!--"&p4ppushleft=3%2C44",-->

                <!--dataType:"jsonp",-->
                <!--success:function(data){-->
                    <!--loadData(data);-->
                    <!--// console.log(data);-->
                <!--}-->
            <!--}-->
        <!--);-->
    <!--}-->
    <!--var diXian;-->

    <!--function loadData(data){-->
        <!--// productArr 是产品信息数组-->
        <!--if(!data.mods.itemlist.data){-->
            <!--if(!diXian) {-->
                <!--diXian = document.createElement("div");-->
                <!--diXian.innerHTML = "我是有底线的";-->
                <!--diXian.style.textAlign = "center";-->
                <!--diXian.style.padding = "0.5rem";-->
                <!--document.body.appendChild(diXian);-->
                <!--loading2.style.display = "none";-->
            <!--}-->
            <!--d1.style.display = "none";-->
            <!--return;-->
        <!--}-->

        <!--var productArr = data.mods.itemlist.data.auctions;-->



        <!--for(var i=0;i<productArr.length;i++){-->
            <!--// p 就是某一个件商品-->
            <!--var p = productArr[i];-->
            <!--var productDiv = document.createElement("div");-->
            <!--productDiv.className = "product fl";-->

            <!--var image = document.createElement("img");-->
            <!--//image.src = "http:" + p.pic_url+"_180x180.jpg_.webp";-->
            <!--// image.src = "http:" + p.pic_url;-->
            <!--image.setAttribute("real_image_src","http:" + p.pic_url+"_180x180.jpg");-->
            <!--image.src = "images/dot.png";-->
            <!--var titleDiv = document.createElement("div");-->
            <!--titleDiv.innerHTML = p.title;-->
            <!--var priceDiv = document.createElement("div");-->
            <!--priceDiv.innerHTML = p.view_price;-->

            <!--productDiv.appendChild(image);-->
            <!--productDiv.appendChild(titleDiv);-->
            <!--productDiv.appendChild(priceDiv);-->

            <!--productList.appendChild(productDiv);-->
        <!--}-->

        <!--//  isDone = true;-->

        <!--// productList.getElementsByTagName("img");-->
        <!--// jquery 充分使用了css3 选择器来作为选择元素的方法-->
        <!--// onclick = load();-->
        <!--// onmouseover = mouseover();-->
        <!--// onload = load();-->
        <!--// 原生JS事件写法-->
<!--//       d1.onclick = function(){-->
<!--//-->
<!--//       }-->
        <!--// jQuery 事件写法-->
<!--//       $("#d1").click(function(){-->
<!--//-->
<!--//       });-->

        <!--// img 有一个事件名为onload ，意思是当图片加载完成后执行-->
        <!--loadedImageCount = 0;-->



        <!--$("#productList img").load(-->
            <!--function(){-->
                <!--loadedImageCount++;-->

                <!--// console.log(loadedImageCount);-->
                <!--if(productArr.length==loadedImageCount){-->
                    <!--console.log("所有图片加载完毕！");-->
                    <!--// 在1秒内让该元素淡入出现-->
                    <!--$("#productList").fadeIn(400);-->
                    <!--//加载真实图片-->
                    <!--loadRealImage();-->
                    <!--d1.style.display = "none";-->

                <!--}-->
            <!--}-->
        <!--);-->

    <!--}-->

    <!--function loadRealImage(){-->
        <!--var images = productList.getElementsByTagName("img");-->
        <!--// 这三十六张图-->
        <!--// 首先俺们要显示在可视区域的图片-->


        <!--var st = document.body.scrollTop||document.documentElement.scrollTop; //0-->
        <!--var ch = document.body.clientHeight||document.documentElement.clientHeight;//1136-->
        <!--var sh = document.body.scrollHeight||document.documentElement.scrollHeight;-->

        <!--// 某元素离顶部距离加上该元素的高度，如果这个结果小于 1136,-->
        <!--// 该元素就完全在可视区域-->
        <!--// pic 是一个普通图片元素-->

        <!--for(var i=0;i<images.length;i++) {-->
            <!--var picParent = images[i].parentNode;-->
            <!--//eleheight 元素高度-->
            <!--var eleheight = $(picParent).height();-->
            <!--//eleOffsetTop 元素离顶部距离-->
            <!--var eleOffsetTop = $(picParent).offset().top;-->

            <!--if(eleheight+eleOffsetTop-st<ch){-->
                <!--if(images[i].getAttribute("real_image_src")) {-->
                    <!--images[i].src = images[i].getAttribute("real_image_src");-->
                    <!--images[i].setAttribute("real_image_src", "");-->
                    <!--images[i].style.opacity = 1;-->
                <!--}-->

            <!--}-->
        <!--}-->
    <!--}-->
<!--</script>-->











<meta charset="utf-8" />




<div class="orderwrap">
    <div class="ordertouch clearfix">
        <div class="ordercont">
            <div class="orderitem clearfix" priceOne>
                <div class="col-xs-1 clearPadding"></div>
                <div class="col-xs-3 clearPadding">
                    <a href="">
                        <img src="" alt="" class="img-responsive">
                    </a>
                </div>
                <div class="col-xs-7 clearPadding pl10">
                    <div class="proname"><a href="">原味手剥大瓜子</a></div>
                    <div class="prodetail">
                        <span class="font14 color-orange">￥<strong class="unitprice" unitprice>9.9</strong></span>
                        <span class="pro_oriprice"><del>19.9</del></span>
                        <span class="color82 font12">库存：100</span>
                    </div>
                    <div class="pronum">
                        <div class="pull-left input-group">
                            <div class="num">数量：</div>
                            <div class="btn-add omin" onclick="minus(this,'9.9','100');" style="padding:2px 8px;">
                                <span class="glyphicon glyphicon-minus"></span>
                            </div>
                            <input type="text" class="btn-num onum" value="" name='count' onblur='amount_input(this,"9.9","100")' >
                            <div class="btn-add oplus" onclick="plus(this,'9.9}','100}');" style="padding:2px 8px;">
                                <span class="glyphicon glyphicon-plus"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-1 clearPadding"></div>
                <i class="iconfont o-label op-label checkitem" productid='}'></i>
                <a href=""><div class="o-more"></div></a>
            </div>
        </div>
        <div class="btn-del" onclick="btndel('',this)">删 除</div>
    </div>
</div>
<div class="bottoms checkoutbox">
    <div class="col-xs-8  bordertop borderbottom">
        <div class="pull-left">
            <i class="o-label checkall iconfont" id="checkall"></i>
            <span class="qxposition">全选</span>
        </div>
        <div class="pull-right">
            <div class="">合计： ￥ <span class="font14 color-orange allprice" id="allprice">0</span></div>
            <div class="font12">不含运费</div>
        </div>
    </div>
    <div class="col-xs-4 clearPadding"><button class="btn-checkout" onclick="sbm();">结算（<span class="allnum" id="amount">0</span>）</button></div>
</div>

<script>
//计算总价
function setTotal(){
var allprice=0;//总价格
var allnum=0;//总数量
$(".checkitem").each(function(){
if($(this).hasClass('oncheck')){
var num=parseInt($(this).parents('[priceOne]').find('input[name=count]').val());//单个商品的购买数量
var price=$(this).parents('[priceOne]').find('[unitprice]').text();//商品单价需要从后台获取
allprice+=num*price;//每样商品的总价
allnum+=num;
}
})
$(".allprice").html(allprice.toFixed(2));
$(".allnum").html(allnum);
}
setTotal();


//手动修改文本框商品数量与库存的限制
function amount_input(tag,sellprice,stock){
var amount=parseInt($(tag).val());
if(isNaN(amount)){
layer.msg('最少购买量为1');
$(tag).val(1);
}else{
if(amount>stock){
layer.msg('购买数量不能大于库存');
$(tag).val(stock);
}else if(amount<1){
layer.msg('最少购买量为1');
$(tag).val(1);
}
}
var val=parseFloat(sellprice)*parseInt($(tag).val());
setTotal();
}
// 全选
$('#checkall').click(function(){
$(this).toggleClass('oncheck');
if($(this).hasClass('oncheck')){
$('.checkitem').addClass('oncheck');
setTotal();
}else{
$('.checkitem').removeClass('oncheck');
setTotal();
}
});
//单选
$('.checkitem').click(function(){
$(this).toggleClass('oncheck');
var itemsleng=$('.checkitem').length;
var checkedleng=$('[priceOne]').find('i').filter('.oncheck').length;
if(checkedleng==itemsleng){
$('.checkall').addClass('oncheck');
setTotal();
}else{
$('.checkall').removeClass('oncheck');
setTotal();
}
});
// 购买数量加
function plus(tag,sellprice,stock){
var _this=$(tag);
var input=_this.prev('input');
if(_this.prev('input[disabled]').length>0){
return;
}
var amount=parseInt(input.val());
amount++;
if(amount>stock){
return layer.msg('购买数量不能大于库存');
}else{
input.val(amount);
setTotal();
}
}
// 购买数量减
function minus(tag,sellprice,stock){
var _this=$(tag);
var input=_this.next('input');
if(_this.next('input[disabled]').length>0){
return;
}
var amount=parseInt(input.val());
amount--;
if(amount<=0){
return layer.msg('购买数量不能小于1');
}else{
input.val(amount);
setTotal();
}
}

</script>













<script>
var selected = "";
var noneSlacted = "";

var p;

window.onload=function() {

p = JSON.parse(localStorage.getItem("shopCart"));

if(!p&&p.length==0){
emptyCart.style.display="flex";
}

console.log(p);
shopCartCount.innerHTML="购物车("+p.length+")";
for (var i = 0; i < p.length; i++) {
var t = p[i];

var itemDiv = document.createElement("div");
itemDiv.className = "itemDiv";
var select = document.createElement("img");
select.title=t.title;
select.onclick = function () {
this.src = this.src == selected ? noneSlacted : selected;
totalPrice();
};
select.className = "ckselect";
select.src = selected;

var itemImg = document.createElement("img");
itemImg.src = t.pic;
itemImg.className = "itemListImg";

var itemTitle = document.createElement("div");
var itemTitleTxt = document.createElement("div");
itemTitleTxt.className = "itemTitleTxt";
itemTitleTxt.innerHTML = t.title;
itemTitle.appendChild(itemTitleTxt);
itemTitle.className = "itemListTitle";

var itemPrice = document.createElement("div");
itemPrice.innerHTML = "&yen;" + (t.price * t.count).toFixed(2);
itemPrice.pr = t.price;
itemPrice.className = "itemListPrice";

var itemCount = document.createElement("div");
itemCount.className = "itemCount";
var itemCountRed = document.createElement("input");
itemCountRed.className = "countReduce";
itemCountRed.type = "button";
itemCountRed.value = "-";
var itemCountTxt = document.createElement("input");
itemCountTxt.className = "countTxt";
itemCountTxt.readOnly = true;
itemCountTxt.value = t.count;
var itemCountAdd = document.createElement("input");
itemCountAdd.className = "countAdd";
itemCountAdd.type = "button";
itemCountAdd.value = "+";

var itemCountDet = document.createElement("input");
itemCountDet.className = "countDet fr";
itemCountDet.type = "image";
itemCountDet.src = "images/delete.png";

itemCountDet.nid=t.nid;

itemCountDet.onclick=function(){
deleteShopCart(this,this.nid);
totalPrice();
};

itemCount.appendChild(itemCountRed);
itemCount.appendChild(itemCountTxt);
itemCount.appendChild(itemCountAdd);
itemCount.appendChild(itemCountDet);

itemTitle.appendChild(itemPrice);
itemTitle.appendChild(itemCount);

itemDiv.appendChild(select);
itemDiv.appendChild(itemImg);
itemDiv.appendChild(itemTitle);

itemList.appendChild(itemDiv);
}
var reds = document.getElementsByClassName("countReduce");
var adds = document.getElementsByClassName("countAdd");
var txts = document.getElementsByClassName("countTxt");
var pris = document.getElementsByClassName("itemListPrice");

for (var i = 0; i < reds.length; i++) {
reds[i].index = i;
reds[i].onclick = function () {
var p = this.index;
if (parseInt(txts[p].value) == 1) {
return;
}
txts[p].value = parseInt(txts[p].value) - 1;
pris[p].innerHTML = "&yen;" + (pris[p].pr * parseInt(txts[p].value)).toFixed(2);
totalPrice();
};
}
for (var j = 0; j < adds.length; j++) {
adds[j].index = j;
adds[j].onclick = function () {
var p = this.index;
txts[p].value = parseInt(txts[p].value) + 1;
pris[p].innerHTML = "&yen;" + (pris[p].pr * parseInt(txts[p].value)).toFixed(2);
totalPrice();
}
}


var allImg = document.createElement("img");
allImg.src = selected;
var allTxt = document.createElement("span");
allTxt.innerHTML = "全选";
allSelact.appendChild(allImg);
allSelact.appendChild(allTxt);
allImg.onclick = function () {
this.src = this.src == selected ? noneSlacted : selected;
var s = this.src;
$(".ckselect").each(function (index, ele) {
ele.src = s;
totalPrice();
});
totalPrice();
};

};


function totalPrice() {
var q = document.getElementsByClassName("ckselect");
var pris = document.getElementsByClassName("itemListPrice");
var txts = document.getElementsByClassName("countTxt");
var totalCount=0;
for(var i=0;i<q.length;i++){

if(q[i].src==noneSlacted){

var o=parseFloat(pris[i].pr)*parseInt(txts[i].value);
totalCount +=o;
}
}

allPrice.innerHTML="";

var allPriceTxt=document.createElement("span");
allPriceTxt.innerHTML="总计：";
var allPriceNum=document.createElement("span");
allPriceNum.innerHTML=totalCount.toFixed(2);

allPrice.appendChild(allPriceTxt);
allPrice.appendChild(allPriceNum);

payNow.onclick=function () {
for(var i=0;i<q.length;i++){

if(q[i].src==noneSlacted){
location="http://test.hfjava.com/shop/zfbpay?price="+totalCount+"&subject="+q[i].title+"&body="+q[i].title;
}
}
}
}
totalPrice();
// var totalCount = 0;
// for (var x = 0; x < pris.length; x++) {
//     totalCount = totalCount + parseFloat(pris[x].innerHTML.substring(1));
// }
// console.log(totalCount);

function deleteShopCart(ele,nid) {

for(var i=0;i<p.length;i++){
if(p[i].nid==nid){
$.confirm('您确定要移除该宝贝吗?', function () {
// console.log(i);
p.splice(i,1);
$(ele).parents(".itemDiv").remove(5000);
shopCartCount.innerHTML="购物车("+p.length+")";
totalPrice();
$.toast("移除成功!");

if(p.length==0){
emptyCart.style.display="flex";
}

localStorage.setItem("shopCart",JSON.stringify(p));
});

break;
}
}

}

</script>



































